//mixed
.mid(){
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  animation: 8s rtt linear infinite;
  border-radius: 5000px;
  & > div{
    width: 100px;
    height: 100px;
    animation: 8s zhuan linear infinite;
    position: absolute;
  }
  & img{
    width: 100px;
    height: 100px;
  }
}


.logo{
  text-align: center;
  img{
    width: 70px;
  }
}
.music{
  position: fixed;
  right: 10px;
  top: 10px;
  cursor: pointer;
}

#all{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: #D5F3C9;
  overflow: hidden;
  .ddpr{
    position: absolute;
    right: -25%;
    top: 35%;
    img{
      width: 300px;
    }
  }
  .title{
    position: absolute;
    top: 20%;
    left: 5%;
    p{
      color: #711C0D;
      font-weight: bold;
      font-size: 30px;
      line-height: 40px;
    }
  }
  .circles{
    position: absolute;
    width: 600px;
    height: 600px;
    z-index: -1;
    right: -70%;
    top: 0;
    bottom: 0;
    margin: auto;
    .circle1{
      border: 3px dashed #967E62;
      width: 300px;
      height: 300px;
      .mid;
      & > div{
        left: 0;
        right: 0;
        top: -50px;
        margin: auto;
      }
    }
    .circle2{
      border: 2px dashed #967E62;
      width: 400px;
      height: 400px;
      .mid;
      & > div{
        top: 0;
        bottom: 0;
        left: -50px;
        margin: auto;
      }
    }
    .circle3{
      border: 1px dotted #967E62;
      width: 500px;
      height: 500px;
      .mid;
      & > div{
        top: 0;
        bottom: 0;
        right: -50px;
        margin: auto;
      }
    }
    .circle4{
      border: 1px solid #967E62;
      width: 600px;
      height: 600px;
      .mid;
      & > div{
        left: 0;
        right: 0;
        bottom: -50px;
        margin: auto;
      }
    }
  }
  .tips{
    display: block;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

@keyframes rtt {
  0%{transform: rotate(0deg)}
  50%{transform: rotate(180deg)}
  100%{transform: rotate(360deg)}
}

@keyframes zhuan {
  0%{transform: rotate(0deg);}
  100%{transform: rotate(360deg)}
}